<template>
    <div id="box">
      <div class="header">
        <Form ref="search" :model="search" inline  :label-width="80">
          <FormItem prop="id" label="用户ID:" >
            <Input v-model="search.id" placeholder="输入用户ID" style="width: 150px"/>
          </FormItem>
          <FormItem prop="shopId" label="门店ID:" >
            <Input v-model="search.shopId" placeholder="输入门店ID" style="width: 150px"/>
          </FormItem>
          <FormItem prop="name" label="门店名称:" >
            <Input v-model="search.name" placeholder="输入门店名称" style="width: 150px"/>
          </FormItem>
          <FormItem prop="state" label="签到状态:" >
            <Select v-model="search.state" style="width: 100px" placeholder="不限">
              <Option  v-for="(item,index) in stateList" :key="item.index" :value="item.value">{{item.label}}</Option>
            </Select>
          </FormItem>
          <FormItem prop="time" label="签到时间:" >
            <DatePicker  v-model="search.time" type="datetimerange" placement="bottom-end"  :clearable="false" placeholder="选择时间" style="width: 300px" @on-change="changeDate"></DatePicker>
          </FormItem>
          <FormItem>
            <Button type="primary"  @click="searching('search')" style="margin-right: 25px;">查询</Button>
            <Button type="default" @click="clear('search')">重置</Button>
          </FormItem>
        </Form>
      </div>
      <div class="center">
        <Table stripe :columns="ReColumns" :data="ReData" :loading="loading"></Table>
      </div>
      <div class="footer">
        <Page :total="total" :page-size="pageSize" :current="steping" style="margin-top: 30px"  show-total @on-change="getData"/>
      </div>
    </div>
</template>

<script>
    export default {
        name: "record",
        data(){
          return{
            search:{
              id:'',
              time:'',
              name:'',
              shopId:'',
              state:'',
            },
            stateList:[
              {
                label:'失败',
                value:0
              },
              {
                label:'成功',
                value:1
              },
            ],
            ReColumns:[
              {
                title: '数据ID',
                align:'center',
                width:100,
                key: 'id'
              },
              {
                title: '用户ID',
                align:'center',
                key: 'userId'
              },
              {
                title: '门店ID',
                align:'center',
                key: 'shopId'
              },
              {
                title: '门店名称',
                align:'center',
                key: 'shopName'
              },
              {
                title: '签到时间',
                align:'center',
                key: 'createTime'
              },
              {
                title: '签到结果',
                align:'center',
                key: 'signResult',
                render: (h, params) => {
                  let txt = "";
                  if (params.row.signResult === 1) {
                    txt = "成功";
                  } else if (params.row.signResult === 0) {
                    txt = "失败";
                  }
                  return h('span', {
                    style: {
                      color: (params.row.signResult == 1) ? "green" : 'red'
                    }
                  }, txt)
                }
              },
              {
                title: '结果描述',
                align:'center',
                key: 'signDesc'
              },
            ],
            ReData:[
            ],
            total:0,
            pageSize:10,
            steping:1,
            loading:true,
          }
        },
      methods:{
        //查询
        searching(name){
        this.getData();
        },
        //重置
        clear(name){
          this.$refs[name].resetFields();
          this.getData();
        },

        //获取时间
        changeDate() {
          if(this.search.time[0] != "" && this.search.time[1]!= ""){
            this.search.start= this.search.time[0].getTime();
            this.search.end = this.search.time[1].getTime();
          }else{
            this.search.start ="";
            this.search.end ="";
          }
        },

        //获取分页数据
        getData(steping) {
          this.steping = steping;
          this.$http.get('/signIn/list',{
            params: {
              userId: this.search.id,
              startTime: this.search.start,
              endTime:  this.search.end,
              shopId:this.search.shopId,
              shopName:this.search.name,
              signResult:this.search.state,
              page: this.steping,
              size: this.pageSize,
            }
          })
            .then(res => {
              console.log(res);
                 if (res.data.status === 200) {
                  this.ReData = res.data.data.list;
                  this.total = res.data.data.total;
                  this.loading = false;
                } else {
                  this.$Message.error(res.data.message);
                  this.loading = false;
                }
            })
        },

      },
      mounted(){
        this.getData();
      },
    }
</script>

<style scoped>

</style>
